<template>
  <router-link :to="`/product/${good.id}`"
               class="simi-item">
    <img :src="good.picture"/>
    <p class="ellipsis">{{ good.name }}</p>
    <p class="price">￥{{ good.price }}</p>
  </router-link>
</template>

<script lang="ts"
        setup>
import type {Good} from '@/types/good'
import {toRefs} from 'vue'

let props = defineProps<{
  data: Good
}>()
let {data: good} = toRefs(props)
</script>

<style lang="less"
       scoped>
.simi-item {
  --animate-duration: .2s;

  img {
    width: 230px;
    height: 230px;
    padding: 20px;
  }

  p {
    width: 230px;
    padding: 0 22px;
    text-align: center;
    font-size: 18px;
    color: #666666;
  }

  .price {
    color: @priceColor;
    margin-top: 15px;
  }
}
</style>